<template>
  <div class="app-container">
      <div slot="header" class="back">
                <router-link :to="{name: 'tools-list'}">
                <el-button plain icon="el-icon-back" size="small" :round="true">
                    返回
                </el-button>
                </router-link>
            </div>
      <div class="container">
          <div class="container-content">
              <img src="../../assets/images/google.png">
              <div class="content"><div class="container_top">
            <span class="container_title">Google 跟踪代码 </span>
                <el-tooltip class="item" effect="dark" content="点击查看 如何设置 Google 分析" placement="top">
                  <i class="el-icon-question" ></i>
                </el-tooltip>
          </div>
          <div class="title">支持添加 Google 跟踪代码，用于统计网站流量服务。可添加 Google Analytics 的跟踪代码 和 谷歌广告转化跟踪代码。 如需添加广告转化跟踪代码，
              <br>先添加 Google Analytics 代码后即可添加广告转化跟踪代码</div>
              </div>
          </div>
      </div>
    <div class="content">
        <div v-if="dataTracking.bindValue">
        <div class="content_e0ae">Google Analytics 账户</div>
        <div class="account__value_8024"><span>{{dataTracking.bindValue}}</span><i class="el-icon-edit" style="margin-left:10px;cursor: pointer;" @click="edit" ></i></div>
        </div>
        <el-form ref="form" :inline="true" v-else>
         <div class="content_title">添加 Google Analytics 的跟踪代码</div>
          <el-form-item label="">
            <textarea autocomplete="off" value="currentValue" v-model="googleCode" placeholder="Global site tag (gtag.js) Google Analytics"
            class="el-textarea__inner" style="min-height: 33px;"></textarea>
          </el-form-item>
        </el-form>
    <div class="footer">
        <div>通过在网站插入谷歌跟踪代码绑定到的你谷歌分析账号后，可以帮助你的网站获取大量数据信息，例如：</div>
        <div>a、多少人访问了你的网站</div>
        <div>b、访客来自哪里</div>
        <div>c、访客在网站上做了什么</div>
        <div>d、访客是如何发现你的网站的</div>
    </div>
    <div class="button" v-show="isHasValue">
        <el-button type="primary" @click="handleSubmit" :loading="submitLoading">保存</el-button>
        <el-button @click="handleReset()" :loading="submitLoading">取消</el-button>
    </div>
    </div>
  </div>
</template>

<script>
import {getAppDataTracking, saveAppDataTracking} from '@/api/app-market';

export default {
    name: 'data-tracking-google',
    data () {
        return {
            isHasValue: false,
            currentValue: this.value,
            dataTrackType: 'G',
            fixOption: {fixedHeader: true},
            googleCode: '',
            submitLoading: false,
            formParams: {
                name: '',
                couponCode: '',
                marketingType: '',
                status: ''
            },
            dataTracking: {
                bindValue: '',
                dataTrackType: ''
            },
            pageParams: {
                page: 1,
                pageSize: 20
            }
        };
    },
    watch: {
        googleCode: function (newVal, oldVal) {
            if (newVal) {
                this.isHasValue = true;
            }
        }
    },
    methods: {
        getData (params) {
            this.formParams.siteId = this.siteId;
            return new Promise((resolve, reject) => {
                getAppDataTracking(this.dataTrackType, this.siteId).then((res) => {
                    if (res.data[0]) {
                        this.dataTracking = res.data[0];
                    }
                });
            });
        },
        edit () {
            this.dataTracking.bindValue = '';
            this.isHasValue = true;
        },
        handleSubmit () {
            this.submitLoading = true;
            if (this.googleCode) {
                // 解析字符串
                let bindVaule = this.googleCode.match(/(UA|YT|MO|GP)-(\d+)-(\d+)/);
                if (bindVaule) {
                    this.dataTracking = {
                        dataTrackType: this.dataTrackType,
                        siteId: this.siteId,
                        bindValue: bindVaule[0]
                    };
                } else {
                    bindVaule = this.googleCode.match(/(G|GTM)-(\w+)/);
                    if (bindVaule) {
                        this.dataTracking = {
                            dataTrackType: this.dataTrackType,
                            siteId: this.siteId,
                            bindValue: bindVaule[0]
                        };
                    } else {
                        this.submitLoading = false;
                        return this.$message.error('你输入的Google Analytics 账户有误');
                    }
                }
            } else {
                this.dataTracking = {
                    dataTrackType: this.dataTrackType,
                    siteId: this.siteId,
                    bindValue: null
                };
            }
            saveAppDataTracking(this.dataTracking).then(res => {
                if (res.code === '200') {
                    this.submitLoading = false;
                    this.$message.success('保存成功');
                    this.isHasValue = false;
                    this.googleCode = null;
                    // this.content_text = true;
                }
                // }).catch(() => {
                this.submitLoading = false;
            }).catch(() => {
                this.submitLoading = false;
            });
        },
        handleReset () {
            this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
                distinguishCancelAndClose: true,
                confirmButtonText: '继续编辑',
                cancelButtonText: '放弃'
            }).then(() => {
                this.$message({
                    type: 'info',
                    message: '继续编辑'
                });
            }).catch(action => {
                this.googleCode = null;
                this.isHasValue = false;
            });
        },
        initData (params) {
            this.getData(params);
        }
    },
    mounted () {
        this.initData(this.formParams);
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    }
}
;
</script>

<style lang="scss" scoped>
.search-list {
  h4 {
    border-bottom: 1px solid #E8E8E8;
    margin: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
}
.container{
    margin: 30px 0 0px 40px;
    padding: 0 0 0 40px;

}
.back{
    margin: 40px;
}
.container-content{
    display: flex;
    flex-direction: row;
}
.container-content img{
    height: 100px;
}
.container_top{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.content{
    display: flex;
    flex-direction: column;
    line-height: 30px;
    margin-left: 20px;
}
.container_title{
    font-size: 22px;
    font-weight: 500;
    color: #30344f
}
.title{
    color:#7e849c;
    line-height:30px;
    font-size:14px
}
.el-textarea__inner{
    width: 1050px;
    height: 240px;
    margin-left: 20px;
    display: block;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: inherit;
    color: #606266;
    background-color: #FFF;
    background-image: none;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.setting{
    padding: 0 15px;
    color: rgb(73, 73, 212);
}
.footer{
   margin: 10px 0 15px 10px;
   padding: 0 10px;
   font-size: 13px;
   color: #30344f;
   line-height: 30px;
}
.button{
    margin: 0 0 20px 40px;
    display: flex;
    align-items: center;
    // justify-content: center;
    font-size: 14px;
    color: #409EFF;
}
.content{
    background-color: white;
}
.content_title{
    margin:0px 0 0 20px;
    font-size:14px;
    padding: 30px 0 10px 0;
    color:#30354d
}
.content_e0ae{
    margin-bottom: 10px;
    color: #30354d;
    font-size: 14px;
    padding: 20px 0;
    margin: 15px 0 0 20px;
}
.account__value_8024 {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 15px 20px;
}
</style>
